<template>
    活动列表
    <van-search v-model="value" placeholder="请输入地点、活动名称等关键字" />
    <van-card
                    desc="2022-12-20 08:00 至 2022-12-20 04:30"
                    title="运动会志愿者招募"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                >
                    <template #tags>
                        <div class="custom-tag">
                            <van-tag  type="primary">进行中</van-tag>
                        </div>
                        <div class="custom-tag2">
                            <van-tag round type="primary">本人所在学校活动</van-tag>
                        </div>
                    </template>
                </van-card>
    <div @click="goBack">返回首页</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter()
const value = ref('');

function goBack(){
    router.push('/')
}
</script>
<style scoped>
.custom-tag {
  position: absolute; /* 使用绝对定位 */
  bottom: 0; /* 底部对齐 */
  left: -88px; /* 左对齐 */
  transform: translateX(-50%); /* 水平居中对齐 */
  margin-bottom: 10px; /* 调整与底部的间距 */
}
.custom-tag2{
    width: 115px;
}
</style>